<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧校园</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="./index.css">
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: 'e1b93e9730d1a02819c9d41e30a47da5',
        }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=97e1969986cfdad21dd89813a23d5a28">
    </script>
    <script src="./js/store.js"></script>
</head>

<body>
    <div id="container"></div>
    <div class="input-card">
        <h4>推荐浏览路线</h4>
        <div class="input-item">
            <button class="btn" onclick="handleAnimte()">开始动画</button>
        </div>
    </div>
    <script>
        let map = new AMap.Map('container', {
            center: [114.402672, 30.518987],
            zoom: 17,
            viewMode: '3D',
            pitch: 45
        })
        AMap.plugin([
            'AMap.ToolBar',
            'AMap.Scale',
            'AMap.ControlBar',
            'AMap.GeoJSON',
            'AMap.MoveAnimation',
        ], function () {
            map.addControl(new AMap.ToolBar({
                position: {
                    top: '80px',
                    right: '40px'
                }
            }))
            map.addControl(new AMap.Scale())
            map.addControl(new AMap.ControlBar())
        })
        console.log(JSON.stringify(getData()))

        var geojson = new AMap.GeoJSON({
            geoJSON: null, // GeoJSON对
        })

        if (JSON.stringify(getData()) != '[]') {
            geojson.importData(getData())
            geojson.eachOverlay((item) => {
                item.on('click', (e) => {
                    console.log(e);
                    var ext = item.getExtData()
                    var click = ++ ext._geoJsonProperties.click
                    var infowindow = new AMap.InfoWindow({
                        anchor: 'top-center',
                        content: `<div>打卡了${click}次</div>`
                    })
                    infowindow.open(map, item.getPosition())
                    setData(geojson.toGeoJSON())
                })
            })
        }

        map.add(geojson)

        map.on('click', event => {
            var marker = new AMap.Marker({
                position: event.lnglat,
                extData: {
                    _geoJsonProperties: {
                        gid: geojson.getOverlays().length + 1,
                        click: 0
                    }
                }
            })

            marker.on('click', (e) => {
                console.log(e);
                var ext = marker.getExtData()
                var click = ++ ext._geoJsonProperties.click
                var infowindow = new AMap.InfoWindow({
                    anchor: 'top-center',
                    content: `<div>打卡了${click}次</div>`
                })

                infowindow.open(map, marker.getPosition())

                setData(geojson.toGeoJSON())

            })
            geojson.addOverlay(marker)
            console.log(geojson);
            setData(geojson.toGeoJSON())
        })

        function handleAnimte() {
            // 实现路径规划
            AMap.plugin('AMap.Driving', () => {
                var driving = new AMap.Driving({
                    map: map,
                    // 驾车路线 策略
                    policy: AMap.DrivingPolicy.LEAST_TIME
                })
                var start = new AMap.LngLat(114.400979, 30.518646)
                var end = new AMap.LngLat(114.40457, 30.523925)

                var opts = {
                    waypoints: []
                }
                geojson.eachOverlay(i => {
                    console.log(i);
                    opts.waypoints.push(i.getPosition())
                })

                driving.search(start, end, opts, function(status, result) {
                    if (status == 'complete') {
                        console.log('ok', result);

                        var lineArr = []
                        result.routes[0].steps.forEach(function(item) {
                            lineArr.push(...item.path)
                        })
                        // 实现轨迹模拟
                        var marker = new AMap.Marker({
                            map: map,
                            position: start,
                            icon: 'https://webapi.amap.com/images/car.png',
                            offset: new AMap.Pixel(-26, -13),
                            autoRotation: true,
                            // angle: -180
                        })

                        var passedPolyline = new AMap.Polyline({
                            map: map,
                            strokeColor: '#AF5',
                            strokeWeight: 6,

                        })

                        marker.on('moving', function(e) {
                            passedPolyline.setPath(e.passedPath)
                        })
                        map.setFitView()
                        marker.moveAlong(lineArr, {
                            duration: 500,
                            autoRotation: true,
                        })

                    } else {
                        console.log('error');
                    }
                })
            })
        }
    </script>
</body>

</html>